<template>
  <MLabelValue v-if="type === 'text'" :value="value" :label="label">
    <slot v-if="notEmpty(value) && unit">{{ unit }}</slot>
  </MLabelValue>
  <div v-if="type === 'img'" class="item-img">
    <div class="label">{{ label }}</div>
    <a-image-preview-group>
      <a-image
        v-for="src in value"
        :key="src"
        width="112px"
        :src="src"
        :placeholder="true"
      />
    </a-image-preview-group>
  </div>
  <div v-if="type === 'file'" class="item-img">
    <div class="label">{{ label }}</div>
    <a-image-preview-group>
      <a-image
        v-for="file in value"
        :key="file.uid"
        width="112px"
        :src="file.url"
        :placeholder="true"
      />
    </a-image-preview-group>
  </div>
  <div v-if="type === 'syFile'" class="item-img">
    <div class="label">{{ label }}</div>
    <a-image-preview-group>
      <a-image
        v-for="file in value"
        :key="file.id"
        width="112px"
        :src="file.url"
        :placeholder="true"
      />
    </a-image-preview-group>
  </div>
  <div class="item-table" v-if="type === 'table'">
    <div class="label">{{ label }}</div>
    <a-table
      :dataSource="value"
      :columns="columns"
      :pagination="false"
      :bordered="true"
      :scroll="{ y: 300 }"
    >
      <template #bodyCell="{ column, text }">
        {{ column.dictCode ? filterByDict(text, column.dictCode) : text }}
      </template>
    </a-table>
  </div>
  <div v-if="type === 'title'" class="form-group_title">
    <SnippetsOutlined class="form-group_title_icon" />
    {{ value }}
  </div>
  <template v-if="type === 'slot'">
    <slot :name="name"></slot>
  </template>
</template>

<script setup lang="ts">
import { SnippetsOutlined } from '@ant-design/icons-vue'
import { filterByDict } from '../utils/filter'
import MLabelValue from './MLabelValue.vue'
import {notEmpty} from '@/hooks/index'

interface Props {
  type?: string
  form?: any
  name?: string
  label: string
  value?: any
  columns?: any[] | undefined
  unit?: string
}
defineProps<Props>()
</script>
<style lang="less" scoped>
.label {
  width: 95%;
  min-height: 12px;
  font-size: 12px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #6c768e;
  line-height: 18px;
  padding-bottom: 5px;
}
.item-img {
  width: 25%;
  min-height: 100px;
  margin-bottom: 35px;
}
.item-table {
  width: 100%;
  min-height: 50px;
  margin-bottom: 35px;
}
:deep(.ant-image) {
  margin-top: 12px;
  margin-right: 8px;
}
:deep(.ant-table) {
  // background: #f2f3f7;
  border-radius: 8px;
}
</style>
